<template>
<!-- 风险管控清单 -->
  <div class="riskanalysis">
    <basic-container>

      <!-- 图表类别 -->
      <div style="margin-bottom: 15px;">
        <el-radio-group v-model="chartType" @change="changeChart">
          <el-radio :label="classifyLabel">风险分类</el-radio>
          <el-radio :label="gradeLabel">风险等级</el-radio>
          <el-radio :label="accidentLabel">易发事故</el-radio>
        </el-radio-group>
      </div>

      <div style="height:80%;">

        <!-- 风险分类 -->
        <e-chart 
          autoresize 
          :options="classifyChartOptions" 
          v-if="chartType === classifyLabel"
          style="height:100%;width: 100%;">
        </e-chart>
        
        <!-- 风险等级 -->
        <e-chart 
          autoresize 
          :options="gradeChartOptions" 
          v-if="chartType === gradeLabel"
          style="height:100%;">
        </e-chart>

        <!-- 易发事故 -->
        <e-chart 
          autoresize 
          :options="accidentChartOptions" 
          v-if="chartType === accidentLabel"
          style="height:100%;">
        </e-chart>
      </div>

    </basic-container>
  </div>
</template>

<script>
import { getAnalysis } from "@/api/saferisk/riskanalysis";
import { mapGetters } from "vuex";

export default {
  data() {
    return {
      classifyLabel: "1",
      gradeLabel: "2",
      accidentLabel: "3",
      chartType: "1",
      classifyChartOptions: {},
      gradeChartOptions: {},
      accidentChartOptions: {},
      labelValue: {
        normal: {
          show: true,
          position: "top"
        }
      }
    }
  },
  computed: {
    ...mapGetters(["permission"])
  },
  mounted() {
    this.initChart();
  },
  methods: {

    // 动态更换单选按钮值
    changeChart(value) {
      if(value) {
        this.initChart();
      }
    },

    // 获取图表数据
    initChart() {
      getAnalysis(this.chartType).then(res => {
        if(res.data.success !== true) {
          return;
        }
        var resData = res.data.data;
        this.formatChartOption(resData);
      });
    },

    // 格式化图表
    formatChartOption(resData) {
      if(this.chartType === this.classifyLabel) {
        this.formatChartOptions(resData, "风险分类");
      } else if(this.chartType === this.gradeLabel) {
        this.formatGradeChartOptions(resData);
      } else if(this.chartType === this.accidentLabel) {
        this.formatChartOptions(resData, "易发事故");
      }
    },

    // 风险分类图表、易发事故图表
    formatChartOptions(resData, xName) {
      let options = {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow"
          }
        },
        color: ['#EA4242', '#FA9A3B', '#FCD42A', '#6DB6EB'],
        legend: {
          data: ['A', 'B', 'C', 'D'],
        },
        grid: {
          left: "4%",
          right: 80,
          bottom: "4%",
          containLabel: true
        },
        xAxis: {
          name: xName,
          data: resData.xaxis,
          axisLabel: {
            color: "#888",
            rotate: 60
          },
          splitLine: {
            show: true
          }
        },
        yAxis: { 
          name: "风险点数",
          minInterval: 1
        },
        series: [{
          name: "A",
          type: "bar",
          barWidth: 12,
          data: resData.gradeAyAxis
        }, {
          name: "B",
          type: "bar",
          barWidth: 12,
          data: resData.gradeByAxis
        }, {
          name: "C",
          type: "bar",
          barWidth: 12,
          data: resData.gradeCyAxis
        }, {
          name: "D",
          type: "bar",
          barWidth: 12,
          data: resData.gradeDyAxis
        }]
      };
      if(this.chartType === this.classifyLabel) {
        this.classifyChartOptions = options;
      } else if(this.chartType === this.accidentLabel) {
        this.accidentChartOptions = options;
      }
    },

    // 风险等级图表
    formatGradeChartOptions(resData) {
      let xAxis = [];
      resData.xaxis.forEach(item => {
        xAxis.push(item.toUpperCase());
      });
      this.gradeChartOptions = {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "line"
          }
        },
        grid: {
          left: "4%",
          right: 80,
          bottom: "4%",
          containLabel: true
        },
        xAxis: {
          name: "风险等级",
          data: xAxis,
          axisLabel: {
            color: "#888"
          },
          splitLine: {
            show: true
          }
        },
        yAxis: { 
          name: "风险点数",
          minInterval: 1
        },
        series: [{
          type: "bar",
          barWidth: "25%",
          data: [{
            name: "A",
            value: resData.gradeAyAxis[0],
            label: this.labelValue,
            itemStyle: {
              color: "#EA4242"
            }
          }, {
            name: "B",
            value: resData.gradeAyAxis[1],
            label: this.labelValue,
            itemStyle: {
              color: "#FA9A3B"
            }
          }, {
            name: "C",
            value: resData.gradeAyAxis[2],
            label: this.labelValue,
            itemStyle: {
              color: "#FCD42A"
            }
          }, {
            name: "D",
            value: resData.gradeAyAxis[3],
            label: this.labelValue,
            itemStyle: {
              color: "#6DB6EB"
            }
          }]
        }],
      };
    }
    
  }
}
</script>

<style lang="scss">
.riskanalysis {
  .el-card__body {
    height: 100%;
  }
}
</style>